<script setup lang="ts">
import { reactive, ref } from 'vue';
import i18n from '../../common/i18n/index.ts';
import GeneralVue from './General.vue';
import Secs1Vue from './Secs1.vue';
import HSMSVue from './HSMS.vue';
import { ConnectionOptions } from '../../common/types';
import { smlService } from '../../common/api.ts';
const emits = defineEmits(['close']);
const general = ref();
const secs1 = ref();
const hsms = ref();
const data = reactive({
    activeTab: 'tab1',
    isShowSaveBtn: true,
})

let globalId = -1;

// const load = (options: ConnectionOptions, isOpen: boolean) => {
//     console.log(options);
//     data.isShowSaveBtn = !isOpen;
//     general.value.load(options);
//     secs1.value.load(options.secs1);
//     hsms.value.load(options.hsms);
// }

const load = (globalIdArg: number) => {
    globalId = globalIdArg;
    smlService.getConfiguration(globalIdArg).then(res => {
        data.isShowSaveBtn = !res.isOpen;
        general.value.load(res.data);
        secs1.value.load(res.data.secs1);
        hsms.value.load(res.data.hsms);
    });
}

const save = () => {
    const generalData = general.value.getData();
    const result: ConnectionOptions = {
        secs1: secs1.value.getData(),
        hsms: hsms.value.getData(),
        identity: generalData.identity,
        protocol: generalData.protocol,
        deviceId: generalData.deviceId,
        systemByte: generalData.systemByte,
    };
    smlService.setConfiguration(globalId, result).then(_ => { }).catch(err => {
        console.error(err);
    })
    emits("close", result);
}

defineExpose({ load });

</script>
<template>
    <el-container>
        <el-main class="no-padding">
            <el-tabs v-model="data.activeTab" type="card" class="app-fit-tab">
                <el-tab-pane :label="i18n.global.t('general')" name="tab1">
                    <template #default>
                        <GeneralVue ref="general" style="padding:15px 15px 15px 15px" />
                    </template>
                </el-tab-pane>
                <el-tab-pane label="Secs1" name="tab2">
                    <template #default>
                        <Secs1Vue ref="secs1" style="padding:15px 15px 15px 15px" />
                    </template>
                </el-tab-pane>
                <el-tab-pane label="HSMS" name="tab3">
                    <template #default>
                        <HSMSVue ref="hsms" style="padding:15px 15px 15px 15px" />
                    </template>
                </el-tab-pane>
            </el-tabs>
        </el-main>
        <el-footer height="32px"
            style="background-color: var(--color-toolbar-1);display: flex;justify-content: flex-end;align-items:center">
            <el-button type="primary" @click="save" v-show="data.isShowSaveBtn">{{ i18n.global.t('save')
                }}</el-button>
            <el-button @click="emits('close')">{{ i18n.global.t('cancel') }}</el-button>
        </el-footer>
    </el-container>
</template>